<template>
	<!-- 地址 -->
	<view>
		<navigator url="/pages/carGots/carGots" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi">

				</text>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.name}}</text>
						<text class="mobile">{{addressData.phone}}</text>
					</view>
					<text class="address">{{addressData.address}} {{addressData.moreAddres}}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<!-- 分割线 -->
			<image class="a-bg"
				src="">
			</image>
		</navigator>
	</view>
	<!-- 商品列表 -->
	<view class="goods-section">
		<view class="g-header b-b">
			<image class="logo" src=""></image>
			<text class="name">xxxxx</text>
		</view>
		<view class="g-item" v-for="val,index in cartList" :key="index">
			<image :src="val.image"></image>
			<view class="right">
				<text class="title clamp">{{val.title}}</text>
				<text class="spec">{{val.attr_val}}</text>
				<view class="price-box">
					<text class="price">￥{{val.price}}</text>
					<text class="number">x{{val.number}}</text>
				</view>
			</view>
		</view>
	</view>
	<!-- 优惠劵 -->
	<view class="yt-list">
		<view class="yt-list-cell b-b" @click="opencoupon()">
			<view class="cell-icon">
				券
			</view>
			<text class="cell-tit clamp">优惠券</text>
			<text class="cell-tip active">
				{{coupon}}
			</text>
			<text class="cell-more wanjia wanjia-gengduo-d"></text>
		</view>
	</view>
	<view class="yt-list">
		<view class="yt-list-cell b-b">
			<text class="cell-tit clamp">商品金额</text>
			<text class="cell-tip">￥{{productAmount}}</text>
		</view>
		<view class="yt-list-cell b-b">
			<text class="cell-tit clamp">优惠金额</text>
			<text class="cell-tip red">-￥{{favorableAmount}}</text>
		</view>
		<view class="yt-list-cell b-b">
			<text class="cell-tit clamp">运费</text>
			<text class="cell-tip">免运费</text>
		</view>
		<view class="yt-list-cell desc-cell">
			<text class="cell-tit clamp">备注</text>
			<input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder" />
		</view>
	</view>
	<view class="footer">
		<view class="price-content">
			<text>实付款</text>
			<text class="price-tip">￥</text>
			<text class="price">{{allPrice}}</text>
		</view>
		<text class="submit" @click="toPayment()">提交订单</text>
	</view>



	<!-- 选择优惠券弹出层 -->
	<view class="content">
		<view class="mask" catchtouchmove="preventTouchMove" v-if="couponshow == true" @tap="hidecoupon"></view>
		<view class="coupon" :style="'bottom:' + (couponshow == true ? '0px':'')">
			<scroll-view class="scrolls" scroll-y>
				<!-- colors:按钮颜色 couponList:优惠卷列表数据  @onReceive：领取或立即使用按钮事件 -->
				<cc-defineCoupon colors="#fa436a" :couponList="couponList" @onReceive="onReceive"></cc-defineCoupon>

			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupon: '选择优惠卷',
				allPrice: 0, // 总价
				productAmount: 0, // 商品金额
				favorableAmount: 0, // 优惠金额
				// transportAmount:0, // 运费
				addressData: {
					name: '小明',
					phone: '15632678915',
					address: '佛山市南海区',
					moreAddres: '桂城街道',
					id: 1
				},
				// 商品示例
				cartList: [{
						id: 1,
						image: '/static/images/banner4.jpg',
						attr_val: '春装款 L',
						stock: 15,
						title: 'OVBE 长袖风衣',
						price: 278.00,
						number: 1
					},
					{
						id: 3,
						image: '/static/images/banner4.jpg',
						attr_val: '激光导航 扫拖一体',
						stock: 3,
						title: '科沃斯 Ecovacs 扫地机器人',
						price: 1348.00,
						number: 5
					},
					{
						id: 4,
						image: '/static/images/banner4.jpg',
						attr_val: 'XL',
						stock: 55,
						title: '朵绒菲小西装',
						price: 175.88,
						number: 1
					},
				],
				couponshow: false,
				//优惠券列表
				couponList: [{
					money: 100,
					reduce: 10,
					date: '2023-05-09 2023-10-02',
					id: 1,
					status: 0,
					condition: ['新人专享', '通用卷']
				}, {
					money: 100,
					reduce: 20,
					date: '2023-02-09 2023-10-02',
					id: 2,
					status: 0,
					condition: ['会员专享', '通用卷']
				}, {
					money: 100,
					reduce: 30,
					date: '2023-02-09 2023-10-02',
					id: 3,
					status: 0,
					condition: ['数码产品可用', '不可与其他产品共享']
				}, {
					money: 100,
					reduce: 40,
					date: '2023-02-09 2023-10-02',
					id: 4,
					status: 0,
					condition: ['新人专享', '可与其他产品共享']
				}, {
					money: 100,
					reduce: 50,
					date: '2023-02-09 2023-10-02',
					id: 5,
					status: 0,
					condition: ['新人专享', '仅在支付时使用']
				}],
			}
		},
		mounted() {
			this.productPrice()
			setTimeout(() => {
				this.sumUp()
			}, 200)
		},
		onLoad(option) {
			if(option.data){
				this.addressData = JSON.parse(option.data)
			}
			console.log(option.data);
			uni.setNavigationBarTitle({
				title: '创建订单'
			})
		},
		methods: {
			// 计算总价
			sumUp() {
				this.allPrice = this.productAmount - this.favorableAmount
			},
			// 商品总价
			productPrice() {
				for (let val of this.cartList) {
					this.productAmount += val.price;
				}
			},
			// 优惠价格
			favorablePrice(val) {
				if (this.productAmount >= val.money) {
					this.favorableAmount = val.reduce
				}
			},
			// 结算后跳转支付页面
			toPayment() {
				uni.navigateTo({
					url: `/pages/paymentPage/paymentPage?allPrice=${this.allPrice}`
				})
			},
			// 打开优惠券弹框 
			opencoupon() {
				this.couponshow = true
			},
			// 关闭优惠券弹框 
			hidecoupon() {
				this.couponshow = false
			},
			//领取优惠券 立即使用事件
			onReceive(item, index) {
				// console.log(item, index)
				if (item.status == 0) {
					// 领取优惠券 事件
					this.couponList[index].status = 1 //领取成功
					uni.showToast({
						title: '领取成功',
						icon: 'none'
					})
					console.log(item);
				} else {
					console.log(111);
					// this.favorablePrice(item)
				}
			},
		}
	}
</script>

<style lang="scss">
	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: #909399;
		}

		.icon-you {
			font-size: 32upx;
			color: #909399;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	// 商品列表
	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: #606266;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: #303133;
				display: block;
			}

			.spec {
				font-size: 26upx;
				color: #909399;

			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: #909399;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}

				.number {
					font-size: 26upx;
					color: #606266;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	// 优惠列表
	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: #909399;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: #909399;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: #303133;

			&.disabled {
				color: #909399;
			}

			&.active {
				color: #fa436a;
			}

			&.red {
				color: #fa436a;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: 28upx;
			color: #303133;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: #606266;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);

		.price-content {
			padding-left: 30upx;
		}

		.price-tip {
			color: #fa436a;
			margin-left: 8upx;
		}

		.price {
			font-size: 36upx;
			color: #fa436a;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: #fa436a;
		}
	}



	// 优惠劵
	.content {
		display: flex;
		flex-direction: column;

	}

	.mask {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		z-index: 900;
		opacity: 0.7;
	}

	/* 优惠券 */
	.coupon {
		background-color: #fff;
		border-radius: 10upx 10upx 0 0;
		position: fixed;
		left: 0;
		bottom: -1000upx;
		z-index: 999;
		transition: all 0.3s;
	}

	.scrolls {
		width: 100vw;
		height: 60vh;
		padding-top: 10upx;
		z-index: 500;
	}
</style>